<template>
<div> 
 <div class="header">
   <div class="header-left">
    <span class="iconfont back-icon">&#xe624;</span>
   </div>
   <div class="header-input">
     <span class="iconfont">&#xe632;</span>
     输入游玩城市/景点/主题项目
   </div>
  <router-link to="/city">
    <div class="header-right"> 
    {{this.city}}
    <span class="iconfont arrow-icon">&#xe64a;</span>
    </div>
  </router-link>
 </div>
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
  name:"HomeHeader",
  computed:{
    ...mapState(["city"])
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
 .header
   display :flex
   line-height:.86rem
   background:$bgColor
   color:#fff
   .header-left
      width:.64rem
      float:left
      .back-icon
        text-align:center
         font-size:.4rem
    .header-input
       flex:1
       background:#fff
       margin-top:.12rem
       height:.64rem
       line-height 0.64rem
       marigin-left:.2rem;
       border-radius:.1rem
       padding-left:.2rem
       color:#ccc
     .header-right
        min-width 1.04rem
        padding:0 .1rem
        float:right
        color:#fff
        text-align:center
        .arrow-icon
          margin-left:-.04rem 
          font-size:.24rem
</style>
